<template>
  <div class="background">
    <canvas id="c" width="634" height="591" style="border: 1px solid #333"></canvas>
    <div class="airContainer">
      <Cabin />
      <AirSys />
    </div>
    <img src="./cabin.png" alt="CUSTOMER CABIN" class="cabin3" />
    <img src="./engine.png" alt="ENGINE" class="engine1" />
    <img src="./engine.png" alt="ENGINE" class="engine2" />
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { Canvas, Line, Triangle, Circle, Path } from 'fabric' // browser
import Cabin from './Cabin.vue'
import AirSys from './AirSys.vue'

import { useStore } from 'vuex'
const store = useStore()

const drawCanvas = () => {
  const canvas = new fabric.Canvas('c')
}

onMounted(() => {
  drawCanvas()
})
</script>

<style scoped>
.background {
  position: relative;
  width: 634px;
  height: 591px;
}

.engine1 {
  position: absolute;
  top: 412px;
  left: 35px;
  z-index: -10;
}

.engine2 {
  position: absolute;
  top: 412px;
  left: 530px;
  z-index: -10;
}

.cabin3 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -10;
  width: 100%;
}

canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.airContainer {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  height: 591px;
  width: 634px;
}
</style>
